<template>
  <div>
    <div>
      <el-row>
        <el-col :span="2.5">
          <el-button icon="el-icon-menu">
            黄金品类
          </el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button icon="el-icon-plus">
            <router-link to="/menu/addselectgoodsorder"
                         tag="span">
              新增选货单
            </router-link>
          </el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button icon="el-icon-printer">
            导出
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="date"
                          @blur="searchDate(date)"
                          type="daterange"
                          format="yyyy-MM-dd"
                          value-format="timestamp"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-col>
        <el-col :span="1">
          <div> &nbsp;</div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="input"
                    placeholder="请输入选货单号"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary"
                     @click="search"
                     icon="el-icon-search">搜索</el-button>

        </el-col>
        <el-col :span="3">
          <el-button :circle="true"
                     icon="el-icon-delete-solid"></el-button>
          <el-button :circle="true"
                     icon="el-icon-refresh"></el-button>

        </el-col>
      </el-row>
    </div>
    <!-- 选货单列表 -->
    <div>
      <el-table :data="selectorderlist"
                style="width: 100%">
        <el-table-column type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-table-column prop="ordernum"
                         label="单号"
                         width="180">
        </el-table-column>
        <el-table-column prop="client"
                         label="客户">
        </el-table-column>
        <el-table-column prop="department"
                         label="部门">
        </el-table-column>
        <el-table-column 
                         label="状态">
                                 <template slot-scope="scope">
          <span v-if="scope.row.status == 0 ">
            草稿
          </span>
          <span v-if="scope.row.status == 1 ">
            已完成
          </span>
        </template>
        </el-table-column>
        <el-table-column prop="purity"
                         label="成色">
        </el-table-column>
        <el-table-column prop="totalweight"
                         label="重量"
                         width="150">

        </el-table-column>
        <el-table-column prop="totalcount"
                         label="数量"
                         width="150">
        </el-table-column>
        <el-table-column prop="makingtime"
                         label="制单时间"
                         width="200">
        </el-table-column>
        <el-table-column align="center"
                         label="操作">
        <template slot-scope="scope">
          <el-button type="primary" plain  @click="detail(scope.row.ordernum,scope.row.status)">详情</el-button>
        </template>

        </el-table-column>
      </el-table>
    </div>
    <div>
      共多少<font v-model="datanum">{{datanum}}</font>条数据
      <div class="page">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="1"
                       layout="prev, pager, next, jumper"
                       :total="datanum">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
// 导入相依组件

export default {
  components: {},

  data() {
    return {
      total:10,
      date:"",
      OK:"true",
      value1: '',
      input: '',
      selectorderlist: [],
      //显示有多少数据
      datanum: null,
      //当前页数
      pageNum:'1',
      pageSize:'10'
    }
  },
  methods: {

    //查看选货单详情
    detail(ordernum,status){
      console.log(ordernum);
      console.log(status);
      if(status == 0){
        this.$router.push({path:"addselectgoodsorder", query:{ordernum:ordernum}})
      }else{
        this.$router.push({name:"selectgoodsdetail",query:{ordernum:ordernum}})
      }
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    //按输入选货编号查
    search() {

      if(this.input == ""){
        this.$message.error("请输入查询信息")
        return;
      }
      // alert(this.input);
      this.axios({
        method: 'get',
        url: this.baseUrl+"sales/searchbyno",
        params:{
          no:this.input
        }
      }).then(res=>{
        console.log(res.data.data);
        this.selectorderlist = res.data.data;
        this.datanum = 1;
      })
    },

    searchDate(date) {
      //按时间查询并分页
      var startDate = date[0];
      var endDate =  date[1];
      console.log(startDate);
      console.log(endDate);
    this.axios({
      method: 'get',
      url: this.baseUrl + 'sales/findbytime',
      params:{
        startDate:startDate,
        endDate:endDate,
        pageNum:this.pageNum,
        pageSize:this.pageSize
      }
    }).then((res) =>{
        console.log(res.data.data);
        this.selectorderlist = res.data.data.list;
        this.datanum = res.data.data.list.length;
    })
    },
  },

  created(){
    this.axios({
        method: 'get',
        url: this.baseUrl + 'sales/getsgorder',
        params:{
          pageNum:1,
          pageSize:10
        }
      }).then((res) => {
        console.log(res.data.data);
        this.selectorderlist = res.data.data.list;
        this.datanum = res.data.data.list.length;
      })
  }
}
</script>

<style scoped>
.time {
  margin-top: 10px;
  margin-left: 900px;
}
.page {
  float: right;
}
</style>